<template>
  <div class='container'>
  
    <el-form :inline="true" :model="reqParams" class="demo-form-inline">
  <el-form-item label="目录名称">
    <el-input v-model="reqParams.directoryName" placeholder="目录名称"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="reqParams.state" placeholder="请选择">
      <el-option label="启用" value="1"></el-option>
      <el-option label="禁用" value="0"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" class="ClearButton" @click="onDel">清除</el-button>
    <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>
  <el-button type="primary"  @click="addTags = true" icon="el-icon-edit" class="gengduo">新增目录</el-button>
</el-form>
<!-- ssss -->
<el-alert
    :title='`数据一共${changdu}条`'
    type="info"
    show-icon>
  </el-alert>
  <!-- 数据 -->
  <el-table :data="subjects">
    <el-table-column label="序号" type="index" prop="id"></el-table-column>
    <el-table-column label="所属学科" prop="subjectName"></el-table-column>
    <el-table-column label="目录名称" prop="directoryName"></el-table-column>
    <el-table-column label="创建者" prop="username"></el-table-column>
    <el-table-column label="创建日期" >
    <template slot-scope="scope">
    {{ scope.row.addDate | parseTimeByString }}
    </template>
    </el-table-column>
    <el-table-column label="面试题数量" prop="totals"></el-table-column>
    <el-table-column label="状态" >
    <template slot-scope="scope">
    {{ scope.row.state === 1 ? '已启用' : '未启用' }}
    </template>
    </el-table-column>
    <el-table-column label="操作" > 
      <template slot-scope="scope">
        <el-link type="primary" v-if="scope.row.state"  @click="disable(scope.row) "> 禁用 </el-link>
        <el-link type="primary" v-else @click="disable(scope.row)">启用 </el-link>
    
    <el-link type="primary" :disabled="scope.row.state===1" @click="xiugai(scope.row)"> 修改 </el-link>
    <!-- <el-link type="primary"> 删除 </el-link> -->
    <el-button type="text" :disabled="scope.row.state===1"  @click="open(scope.row)">删除</el-button>
      </template>
      </el-table-column>
  </el-table>
  <!-- 分页 -->
  
  <el-pagination class="block"
    layout="prev, pager, next, sizes, jumper"
    :total="total"
    :page-size="reqParams.pageSize"
    :current-page="reqParams.page"
    @current-change="changePager"
    :page-sizes="[5,10,20,50]"
    @size-change="changeSize"
    >
   
  </el-pagination>
  <!-- 新增弹层 -->
<el-dialog title="新增目录" :visible.sync="addTags" width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="所属学科" prop="region">
            <el-select v-model="ruleForm.subjectID" placeholder="请选择活动区域">
              <el-option v-for="item in listliebiao"  :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="ruleForm.directoryName" placeholder="请输入目录名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addTags = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
<!-- 修改弹层 -->
<el-dialog title="新增目录" :visible.sync="addTagsc" width="30%">
        <el-form :model="ModifyBox"  ref="form" label-width="100px">
          <el-form-item label="所属学科" prop="regionz">
            <el-select v-model="ModifyBox.subjectID" placeholder="请选择活动区域">
              <el-option v-for="item in listliebiao"  :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="ModifyBox.directoryName" placeholder="请输入目录名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addTagsc = false">取 消</el-button>
          <el-button type="primary" @click="pageModify ">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
import {list as gitList, remove as DeleteDiscipline, changeState, simple,update,
   add as addmulu
} from '@/api/hmmm/directorys.js'
export default {
  name:'directory',
  data() {
   
      return {
        //搜索
       rules:{
        region:[ { required: true, message: "必填", trigger:'blur' },],
        // tagName:[ { required: true, message: "必填", trigger:'blur' },]
       },
        reqParams:{
          directoryName: null,//搜索框
          state: null,
          page:1,
          pagesize:10
        },
        //页面数据
        total:0,
        subjects: [],
      
        changdu:0,
      //新增弹层
      addTags: false,
      ruleForm: {
        
        subjectID: null,
        directoryName: '',
         
        },
        formLabelWidth: '80px',
        //修改
        addTagsc: false,
        ModifyBox:{
          subjectID: null,
        directoryName: '',
        id:0
        },
        
        //简单列表
       listliebiao:{}
      }
    },
    created() {
      this.handleClick()
      
    },
    methods: {//搜索
      onSubmit() {
        this.reqParams.page=1
        this.handleClick()
      },
      //清空
      onDel(){
        this.reqParams={
          directoryName: null,
          state: null,
          page:1,
          pagesize:10
        }
      },
      //数据
      async handleClick() {
       try {
        const data = await gitList(this.reqParams)
        console.log('lll',data);
        this.subjects= data.data.items
        this.total=data.data.counts
        this.changdu=data.data.counts
        const liebiao = await simple()
       this.listliebiao = liebiao.data
        console.log(liebiao);
       } catch (error) {
        console.log(error);
       }
      },
      //分页
      changePager (newPage){
        // console.log(newPage);
        this.reqParams.page= newPage
        this.handleClick()
      },
      //该每页条数
      changeSize (newSize){
       
        this.reqParams.page=1
        this.reqParams.pagesize= newSize
        this.handleClick()
      }, 
      //禁用
      async disable(data){
        console.log(data);
       data.state ? data.state=0 : data.state=1
        await changeState(data)
        this.handleClick()
      },
      //修改
      xiugai(idw){
        this.addTagsc=true
        this.ModifyBox.subjectID= idw.subjectName
        this.ModifyBox.directoryName= idw.directoryName
        this.ModifyBox.id = idw.id
        // this.ModifyBox.subjectId= idw.
      },
      //修改提交
     async pageModify(){
      await update(this.ModifyBox)
      await this.handleClick()
      },
      //提交
     async submitForm(){
     
      const id=null
      const subjectID= this.ruleForm.subjectID
      const directoryName = this.ruleForm.directoryName
      console.log(directoryName,subjectID,);
       await addmulu( this.ruleForm)
        this.handleClick()
        this.addTags = false
       this. ruleForm = {
        subjectID: null,
        directoryName: ''

        }
      },
      //删除
        open(data) {
        this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await DeleteDiscipline(data)
          this.handleClick()
          this.$message({
            type: 'success',
            message: '删除成功!',
           
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }

    },
    }
  

</script>

<style scoped lang='scss'>
.container {
  padding:10px 15px 10px 15px;
  background-color: #fff;
}
.gengduo{
  background-color: #85ce61;
  border: #85ce61;
  float: right;
}

.block{
  margin-top: 15px;
  float: right;
}
.ClearButton{
  background-color: rgb(255, 255, 255);
  color: #000;
}
.el-link{
  margin-right: 10px;
}
.huodong{
  width: 220px;
}
</style>
